<template>
  <div class="container">
    <detail-bar />
    <div class="content">
      <div class="detail-box">
        <div class="title-box" >
          <h2>{{ blogData.title }}</h2>
          <p>发表于：{{ blogData.createTime.substr(0, 10) }}</p>
        </div>
        <div class="detail-desc">{{ blogData.description }}</div>
        <mavon-editor
          v-model="blogData.content"
          ref="md"
          @change="change"
          style="display:none"
        />
        <div style="margin-top:20px;" v-html="html"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import DetailBar from "../../components/detailbar/index";
import blogsApi from "@/api/blogs";
export default {
  name: "blogDetail",
  components: {
    DetailBar,
    mavonEditor
  },
  data() {
    return {
      blogId: null,
      blogData: null,
      html:""
    };
  },
  created() {
    this.blogId = this.$route.query.id;
    
  },
  mounted () {
    if (this.blogId) {
      this.getBlogData();
    }
  },
  methods: {
    getBlogData() {
      blogsApi
        .getBlogById(this.blogId)
        .then(({ data: res }) => {
          console.log(res);
          if (res.code === 200) {
            this.blogData = res.data.data;
          } else {
            return false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f5f6f7;
}
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 50px;
  display: flex;
  justify-content: center;
}
.detail-box::-webkit-scrollbar {
  width: 0;
}
.detail-box {
  overflow-y: auto;
  width: 95%;
  height: calc(100vh - 120px);
  background: #fff;
  box-shadow: 0 0 20px #ccc;
  box-sizing: border-box;
  padding: 20px;
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      color: #666;
    }
  }
  .detail-desc {
    color: #999;
    line-height: 30px;
  }
}
</style>